<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<view class="info">
			<view class="bottom">
				<u--form :model="user" :rules="rules" ref="uForm" labelWidth="0">
					<view class="info_row">
						<view class="attr">
							<text class="tip">用户账号:</text>
							<text>{{user.account}}</text>

						</view>
					</view>
					<view class="info_row">
						<view class="attr">
							<text class="tip">用户头像:</text>
							<!--  -->

							<view class="row_content u_avatar" @click="handleChangeAvatar">
								<!-- 小提示 -->
								<text class="little_tip">(点击更换头像)</text>
								<!-- 头像展示 -->
								<view class="avatar">
									<image :src="user.avatar" mode="" class="avatar_img"></image>
									<view class="img_icon">
										<u-icon name="camera-fill" size="24"></u-icon>
									</view>
								</view>

							</view>
						</view>
					</view>

					<view class="info_row">
						<!--  -->
						<view class="attr">
							<text class="tip">用户昵称:</text>
							<text v-if="activeIndex==0">{{user.nickName}}</text>
							<view class="row_content">
								<u-form-item prop="nickName" v-if="activeIndex==1">
									<u-input type="text" v-model="user.nickName" clearable>
									</u-input>
								</u-form-item>


							</view>
						</view>

					</view>

					<view class="info_row">
						<!--  -->
						<view class="attr">
							<text class="tip">用户电话:</text>
							<view class="row_content">
								<text v-if="activeIndex==0">{{user.mobile}}</text>
								<u-form-item prop="mobile" v-if="activeIndex==1">
									<u-input type="text" v-model="user.mobile" clearable>
									</u-input>
								</u-form-item>

							</view>
						</view>

					</view>

				</u--form>

			</view>
			<view class="top">
				<view class="info_row">
					<!--  -->
					<view class="attr">
						<text class="tip">用户姓名:</text>
						<text>{{tuser.name}}</text>
					</view>
				</view>
				<view class="info_row">
					<!--  -->
					<view class="attr">
						<text class="tip">用户年龄:</text>
						<text>{{tuser.age}}</text>
					</view>
				</view>
				<!--  -->

				<view class="info_row">
					<view class="attr">
						<text class="tip">用户性别:</text>

						<view class="row_content">
							<view style="width: 100upx;">

								<u-tag text="男" icon="man" size="mini" v-if="tuser.gender=='男'"></u-tag>
								<u-tag text="女" icon="woman" size="mini" v-if="tuser.gender=='女'" bgColor="#ff6a89"
									borderColor="#ff6a89"></u-tag>
							</view>
							<!--  -->

						</view>
					</view>

				</view>

				<view class="info_row">
					<view class="attr">
						<text class="tip">用户身份:</text>
						<!--  -->
						<view class="row_content">
							<view class="row_icon1" v-if="user.roleId == 1">
								教师
							</view>
							<view class="row_icon2" v-if="user.roleId == 2">
								学生
							</view>
							<view class="row_icon3" v-if="user.roleId == 0">
								管理员
							</view>
							<view class="row_icon4" v-if="user.roleId == -1">
								超级管理员
							</view>
							<!--  -->

						</view>
					</view>

				</view>
			</view>


			<!-- 底部按钮 -->
			<view class="bottom_btn">
				<!-- 大编辑按钮 -->
				<view class="big_btn" v-if="activeIndex==0">
					<u-button type="primary" text="编辑信息" @click="handleEdit"></u-button>

				</view>
				<!-- 小编辑按钮 -->
				<view class="small_btn" v-if="activeIndex==1">
					<u-button :plain="true" type="primary" text="取消编辑" @click="handleCancleEdit"></u-button>
				</view>
				<view class="small_btn" v-if="activeIndex==1">
					<u-button type="primary" text="提交编辑" @click="handleSubmit"></u-button>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	import {
		checkOnly,
		updateUserInfo
	} from "../../api/user.js"
	export default {
		data() {
			return {
				rules: {
					'nickName': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur']
					},
					mobile: [{
							type: 'string',
							required: true,
							message: '请填写电话',
							trigger: ['blur']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// 过滤第一层，先判断输入为不为空，因为required: false，不是必填项，所以为空应该返回true
								if (value) {
									return this.$u.test.mobile(value);
								} else {
									return true
								}

							},
							message: '请输入正确的电话号码',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					]
				},
				activeIndex: 0,
				user: {
					account: "lll"
				},
				tuser: {},
				//备份编辑前的数数据
				user1: {},
				// 
				// 
				userInfo: {}



			};
		},
		methods: {
			// 提交编辑
			handleSubmit() {

				// console.log(this.user);
				this.$refs.uForm.validate().then(res => {
					this.activeIndex = 0
					updateUserInfo(this.user).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: "信息修改成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})

						uni.setStorageSync('user', this.user)

					})
				}).catch(err => {
					uni.$u.toast('请输入所有必填项')
				})

			},
			// 编辑
			handleEdit() {
				this.activeIndex = 1
			},
			// 取消编辑
			handleCancleEdit() {
				this.activeIndex = 0
				this.user = {
					...this.user1
				}
			},
			// 上传图片修改头像
			handleChangeAvatar() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://127.0.0.1:7001/imgUpload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								// console.log(data);
								this.user.avatar = data.data
							},
							// 
						});
					}
				});
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('user')
			this.tuser = uni.getStorageSync('tuser')
			this.user1 = uni.getStorageSync('user')
			// // console.log(user);
			// // console.log(tuser);
			this.userInfo.user = this.user
			this.userInfo.tuser = this.tuser



			// console.log(this.userInfo);
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 30upx;

		.info {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			border-radius: 20upx;

			// background-color: pink;
			.top {
				width: 100%;
				box-shadow: 0 0 7px rgba(0, 0, 0, .15);
				border-radius: 20upx;
				margin-bottom: 30upx;
				// 
			}

			.bottom {
				width: 100%;
				box-shadow: 0 0 7px rgba(0, 0, 0, .15);
				border-radius: 20upx;
				margin-bottom: 30upx;
				// padding-bottom: 30upx;
			}

			.bottom_btn {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.big_btn {
					width: 100%;
				}

				.small_btn {
					width: 49%;
				}
			}

			.info_row {
				width: 100%;
				border-bottom: 0.5px solid #ccc;
				min-height: 100upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				&:last-child {
					border: none;
				}

				.attr {
					box-sizing: border-box;
					padding: 15upx 20upx;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.tip {
						width: 140upx;
						font-size: 30upx;
						font-weight: 700;
					}
				}

				.row_content {
					flex: 1;

					.row_icon1 {
						width: 155upx;
						height: 45upx;
						font-size: 26upx;
						background-color: #fbc424;
						text-align: center;
						line-height: 45upx;
						color: #fff;
						border-radius: 5upx;
					}

					.row_icon2 {
						width: 155upx;
						height: 45upx;
						font-size: 26upx;
						background-color: #5ac725;
						text-align: center;
						line-height: 45upx;
						color: #fff;
						border-radius: 5upx;
					}

					.row_icon3 {
						width: 155upx;
						height: 45upx;
						font-size: 26upx;
						background-color: #f56c6c;
						text-align: center;
						line-height: 45upx;
						color: #fff;
						border-radius: 5upx;
					}

					.row_icon4 {
						width: 155upx;
						height: 45upx;
						font-size: 26upx;
						background-color: #f56c6c;
						text-align: center;
						line-height: 45upx;
						color: #fff;
						border-radius: 5upx;
					}

				}

				.u_avatar {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.little_tip {
						font-size: 24upx;
						color: #ccc;
						// 
					}

					.avatar {
						width: 180upx;
						height: 180upx;
						border-radius: 50;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						position: relative;

						.avatar_img {
							border-radius: 50%;
							width: 160upx;
							height: 160upx;

						}

						.img_icon {
							position: absolute;
							bottom: 0;
							right: 0;
							// 
						}
					}
				}
			}
		}
	}
</style>